<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>login</title>
		
		<link type="text/css" href="jquery/css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="Stylesheet" />	
		<script type="text/javascript" src="jquery/jquery-1.4.2.min.js.nocompile"></script>
		<script type="text/javascript" src="jquery/js/jquery-ui-1.8.2.custom.min.js"></script>
		<script type="text/javascript" src="jquery/ownfunctions.js"></script>

		<script type="text/javascript" src="graphics/raphael-min.js.nocompile"></script>
		<script type="text/javascript" src="graphics/raphael.draggable.js"></script>
		<script type="text/javascript" src="graphics/cfphdraw.js.nocompile"></script>
		
		<script type="text/javascript">
			function alertProperties(obj) {
				var s="";
				for (var p in obj)
					s+=p+", "
				alert(s);
			}

			$(function() {
				var servicesPanel = document.getElementById("services-workspace");
				var workspacePanel = document.getElementById("user-workspace");
				var objectsPanel = document.getElementById("objects-workspace");
				var x1 = servicesPanel.offsetLeft;
				var y1 = servicesPanel.offsetTop;
				var x2 = workspacePanel.offsetLeft + workspacePanel.offsetWidth;
				var y2 = workspacePanel.offsetTop + workspacePanel.offsetHeight - 40;
				var servicesPaper = Raphael(x1,y1,x2,y2);
				CFPH.Draw.init(servicesPaper);
				CFPH.Draw.addService(15, 0, "BatteryIndicator", [], [], true, "", function() { });
				CFPH.Draw.addService(135, 0, "Webcam", [], [], true, "", function() { });
				CFPH.Draw.addService(15, 85, "HeatSensor", [], [], true, "", function() { });

				var y = objectsPanel.offsetTop-40+10;
				
				CFPH.Draw.addService(15, y, "SMS", ["message"], ["number"], true, "", function() { });
				CFPH.Draw.addService(135, y, "Email", ["message"], ["address"], true, "", function() { });
			});
		</script>
	</head>
	<body style="width:100%; padding:0; margin:0; height:100%;">
		<div id="panel" class="ui-widget">
			<table style="position:absolute; top:0; bottom:0; width:100%;" cellspacing=0>
				<tr>
					<td class="ui-widget-header" style="height:40px; width:250px; text-align:center">services</td>
					<td class="ui-widget-header" style="height:40px; text-align:center">user workspace</td>
				</tr>
				<tr>
					<td id="services-workspace">&nbsp;</td>
					<td id="user-workspace" rowspan="3" class="ui-widget-content">&nbsp;</td>
				</tr>
				<tr>
					<td class="ui-widget-header" style="height:40px; width:250px; text-align:center">objects</td>
				</tr>
				<tr>
					<td id="objects-workspace">&nbsp;</td>
				</tr>
			</table>
<!--			<table>
				<thead>
					<tr class="ui-widget-header">
						<th style="width:20%">services</th>
						<th style="width:80%">workspace</th>
					</tr>
				</thead>
				<tbody>
					<tr style="height:100%" class="ui-widget-content">
						<td style="height:100%">
							<table style="height:100%; width:250px">
								<tr style="height:50%">
									<td id="service-panel" style="height:50%">
										<div style="border:dashed black 1px; background-color:#dddddd; height:100%">
											sdf
										</div>
									</td>
								</tr>
								<tr style="height:50%">
									<td class="ui-widget-header">
										objects
									</td>
								</tr>
							</table>
							
						</td>
						<td id="workspace-panel" style="height:100%" rowspan="3">
							<div style="height:100%">
							</div>
						</td>
					</tr>
				</tbody>
			</table>-->
		</div>
	</body>
</html>
